<template>
    <div class="main">
        <div class="model">
            <h1 class="header text-center">
                文件名称
            </h1>
            <div class="body">
                <div class="search-nav">
                    <div class="fl back-box">
                        <img v-show="floderNavLists.length > 0" class="back pointer"
                             @click="goBack" src="@/assets/icon/arrow/active.png">
                        <img v-show="floderNavLists.length === 0" class="back" src="@/assets/icon/arrow/silent.png">
                        <img v-show="historyList.length > 0"
                             @click="goForward" class="forward pointer" src="@/assets/icon/arrow/active.png">
                        <img v-show="historyList.length === 0" class="forward" src="@/assets/icon/arrow/silent.png">
                    </div>
                    <div class="fr search">
                        <img class="search-icon fl" src="@/assets/icon/search_icon.png">
                        <input v-model="searchText" placeholder="搜索">
                    </div>
                </div>
                <div class="file-box">
                    <div class="dept-box fl">
                        <ul class="dept-list">
                            <li class="text-center pointer relative dept-list-box" style="padding:0">
                                <menu-button class="dept-name hover" :clickFun="getDeptList"
                                             :class="checkCurrentPath('detail/0?deptId=0')"
                                             content="企业文件" imgPosition="0 0"></menu-button>
                                <i class="drop-down-icon"
                                   :class="currentCompany.showChildren? 'drop-down-icon-rotate' :'drop-down-icon-rotate-back'"> </i>
                                <ul v-if="currentCompany.showChildren ">
                                    <organization :status="true" v-for="(dept,key) in currentCompany.children"
                                                  :key="key" :dept="dept" :clickFun="chooseDept"></organization>
                                </ul>
                            </li>
                            <li class="text-center pointer hover" :class="checkCurrentPath('detail/1')"
                                @click="getPrivateFileList('个人文件','0 -38px')">
                                <menu-button content="个人文件" imgPosition="0 -38px"></menu-button>
                            </li>
                            <li class="text-center pointer hover" :class="checkCurrentPath('detail/2')"
                                @click="getCooperationList('与我协作','0 -76px')">
                                <menu-button content="与我协作" imgPosition="0 -76px"></menu-button>
                            </li>
                        </ul>
                    </div>
                    <div class="folder-box fl">
                        <div class="folder-nav">
                            <ul class="nav" v-show="navName !== ''">
                                <li class="fl">
                                    <i class="fl icon" :style="{'background-position':imgPosition}"></i>
                                    <p class="fl text" v-text="navName" :class="floderNavLists.length === 0 ? 'active' : ''"></p>
                                </li>
                                <li v-for="(folder,key) in  floderNavLists" :key="key"
                                    :class="floderNavLists.length - 1 === key ? 'active' : ''">
                                    <p class="fl text" v-text="'-' + folder.name"></p>
                                </li>
                            </ul>
                        </div>
                        <ul class="folder-list pointer">
                            <li v-for="(value,key) in folderList" :key="key" @click="chooseFolder(value)">
                                <check-icon class="icon-box fl" :fileData="value"></check-icon>
                                <p v-if="!value.isCreated" class="fl text" v-text="value.name"></p>
                                <input class="file-name-text" style="margin: -3px 12px -3px 0px;"
                                       v-if="value.isCreated" v-model="value.name" v-focus
                                       @blur="putNewFolder(value)"
                                       @keyup.enter="inputBlur">
                            </li>
                        </ul>
                        <a class="add-folder pointer" v-if="showAdd" @click="addFolder">
                            <span class="add-icon">+</span>
                             新建文件夹</a>
                        <div class="button-box">
                            <button class="cencel" @click="cencel(false)">取消</button>
                            <button class="ok" @click="moveOver">确认</button>

                        </div>
                    </div>
                    <loading v-show="pageLoading"></loading>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
  import MenuButton from '@/components/MenuButton.vue'
  import Organization from '@/components/Organization.vue'

  export default {
    name: "MoveFileModel",
    components: {
      MenuButton,
      Organization
    },
    props:{
      detailFolder:{
        type:String,
        default:function () {
          return ''
        }
      },
      fileDatas:{
        type:Array,
        default:function () {
          return {}
        }
      },
      type:{
        type:String,
        default:function () {
          return 'move'
        }
      }
    },
    data() {
      return {
        canForward:false,
        canBack:false,
        searchText:'',
        navName:'',
        currentCompany: {},
        userInfo:{},
        imgPosition:'',
        folderList:[],
        isFolderNull:false,
        floderNavLists:[],
        pageLoading:false,
        currentFolderId:'',
        currentDeptID:'',
        currentType:'',
        historyList:[],
        initFolderId:'',
        initFolderList:[]
      }
    },
    watch:{
      searchText:function (value) {
        this.folderList = this.initFolderList.filter(function (file) {
          return file.name.indexOf(value) > -1
        })
      }
    },
    computed:{
      showAdd:function () {
        return this.currentFolderId !== '' && this.currentFolderId !== 'getCooperationList'
      }
    },
    mounted(){
      this.userInfo = this.$store.state.user.userInfo
    },
    methods: {

      cencel:function(status){
        this.$emit('moveCencel',status)
      },

      moveOver:function(){
        if (!this.currentFolderId || this.currentFolderId === '' ||this.currentFolderId === 'getCooperationList'){
          return this.$message({
            type:'error',
            message:'请选中文件夹再进行操作'
          })
        }
        if(this.detailFolder === this.currentFolderId){
         return this.$message({
            type:'warning',
            message:'文件已经在该文件夹下'
          })
        }
        if(this.type === 'move'){
          this.moveFile()
        }else{
          this.copyFiles()
        }
      },

      copyFiles:function(){
        const that = this
        this.fileDatas.forEach(function (file) {
          if(file.fileType === 0){
            that.copyFile({
              fileId: file.fileId,
              folderId: that.currentFolderId,
              name: file.name
            })
          }
        })
      },

      copyFile:function(fileData){
        const that = this
        this.pageLoading = true
        this.$http.post('/pan/file/copy/v1', fileData).then(function (data) {
          that.pageLoading = false
          if (data.data.code === 1) {
            that.$message({
              type:'success',
              message:'复制成功'
            })
            that.cencel()
          }
        })
      },

      moveFile:function(){
        const that = this
        this.pageLoading = true
        this.$http.post('/pan/file/files/v1', this.getMoveArr()).then(function (data) {
          that.pageLoading = false
          if (data.data.code === 1) {
            that.$message({
              type:'success',
              message:'移动成功'
            })
            that.cencel(true)
          }
        })
      },

      getMoveArr:function(){
        const that = this
        let moveData = []
        this.fileDatas.forEach(function (file) {
          moveData.push({
            id: file.fileId,
            parentId: that.currentFolderId,
          })
        })
        return moveData
      },

      addFolder:function(){
        this.folderList.unshift({
          id: this.$uuidv1(),
          name: '新建文件夹',
          fileType: 1,
          isCreated: true
        })
        this.editFileName = '新建文件夹'
        this.isFileNull = false
      },

      inputBlur: function (event) {
        event.target.blur()
      },

      putNewFolder: function (fileData) {
        if (fileData.name === '') {
          this.$message({
            type: 'error',
            message: '文件夹名称不能为空'
          })
          return this.deleteFolder(fileData)
        }
        const that = this
        this.pageLoading = true
        this.$http.put('/pan/file/folder/v1', {
          parentId: this.currentFolderId,
          folderName: fileData.name,
        }).then(function (data) {
          that.pageLoading = false
          if (data.data.code === 1) {
            for (let i = 0; i < that.folderList.length; i++) {
              if (that.folderList[i].id === fileData.id) {
                that.folderList[i].fileId = data.data.data.id
                that.folderList[i].fileType = 1
                that.folderList[i].name = data.data.data.name
                that.folderList[i].updateTime = data.data.data.updateTime
                that.folderList[i].isCreated = false
                break
              }
            }
          } else {
            that.deleteFolder(fileData)
          }
        }).catch(function (error) {
          console.log(error)
          that.pageLoading = false
          that.deleteFolder(fileData)
        })
      },

      deleteFolder: function (fileData) {
        for (let i = 0; i < this.folderList.length; i++) {
          if (this.folderList[i].id === fileData.id) {
            this.folderList.splice(i, 1)
            break
          }
        }
      },

      checkCurrentPath: function (path) {
        if (this.$route.fullPath.indexOf(path) > -1) {
          return 'menu-active'
        } else {
          return ''
        }
      },

      goBack:function(){
        const key = this.floderNavLists.length - 1
        if(this.floderNavLists.length < 2){
          this.checkType()
        }else{
          this.getFloderListData(this.floderNavLists[key -1].fileId)
        }
        this.historyList.push(this.floderNavLists[key])
        this.floderNavLists.splice(key,1)
      },

      checkType:function(){
        if(this.navName === '与我协作'){
          this.getCooperationList('与我协作','0 -76px')
        }else{
          this.getFloderListData(this.initFolderId)
        }
      },



      goForward:function(){
        const key = this.historyList.length - 1
        this.floderNavLists.push(this.historyList[key])
        this.getFloderListData(this.historyList[key].fileId)
        this.historyList.splice(key,1)
      },

      getCooperationList: function (name,imgPosition) {
        this.initData(name,imgPosition)
        const that = this
        this.pageLoading = true
        this.currentFolderId = 'getCooperationList'
        this.$http('/pan/file/cooperate/list/v1/1/1000').then(function (data) {
          that.pageLoading = false
          if (data.data.code === 1) {
            that.initFolderList = data.data.data
            that.folderList = that.initFolderList
          }
        })
      },

      getDeptList: function () {
        this.currentCompany.companyFolderName = '企业文件'
        this.initData('企业文件','0 0')
        this.chooseDept(this.currentCompany, true,'0 0')
        const isNotAgain = localStorage.getItem('companyfileHomeAlert')
        if (!isNotAgain) {
          this.showExplain = true
        }
      },

      initData:function(name,imgPosition){
        this.imgPosition = imgPosition
        this.navName = name
        this.floderNavLists = []
        this.currentType = name
        this.historyList = []
      },

      getPrivateFileList: function (name,imgPosition) {
        if(this.currentType === name) return
        this.initData(name,imgPosition)
        const that = this
        this.pageLoading = true
        this.$http.get('/pan/file/folder/personal/v2').then(function (data) {
          that.pageLoading = false
          if (data.data.code === 1) {
            that.getFloderListData(data.data.data)
          }
        })
      },

      chooseDept: function (dept,status,imgPosition) {
        const that = this
        const deptId = status ? 0 : dept.deptId
        const deptName = dept.companyFolderName ? dept.companyFolderName : dept.name
        this.getDeptFileId(deptId,deptName)
        this.initData(deptName,imgPosition)
        if (dept.showChildren) {
          return this.$set(dept, 'showChildren', false)
        } else if (dept.children && dept.children.length > 0) {
          return this.$set(dept, 'showChildren', true)
        }
        this.$http.get('/organization/company/dept/' + this.userInfo.companyId + '/' + dept.deptId).then(function (data) {
          if (data.data.code === 1) {
            that.$set(dept, 'showChildren', true)
            that.$set(dept, 'children', data.data.data.branchList)
            if (data.data.data.branchList.length === 0) {
              that.$set(dept, 'childernNotExist', true)
            } else {
              that.$set(dept, 'childernNotExist', false)
            }
          }
        })
      },

      chooseFolder:function(folder){
        this.floderNavLists.push(folder)
        this.getFloderListData(folder.fileId)
      },

      getDeptFileId: function (deptId,name) {
        const that = this
        this.navName = name
        this.currentDeptID = deptId
        this.pageLoading = true
        this.$http.get('/pan/file/folder/dept/v2/' + deptId).then(function (data) {
          that.pageLoading = false
          if (data.data.code === 1) {
            that.initFolderId = data.data.data
            that.getFloderListData(data.data.data)
          }
        })
      },

      getFloderListData: function (folderId) {
        if(this.currentFolderId === folderId) return
        const that = this
        this.pageLoading = true
        this.chooseFileList = []
        this.currentFolderId = folderId
        this.$http.get('/pan/file/childFolder/v1/' + folderId).then(function (data) {
          that.pageLoading = false
          if (data.data.code === 1) {
            that.initFolderList = data.data.data
            that.folderList = that.initFolderList
          } else {
            that.$message({
              type: 'error',
              message: data.data.msg
            })
            that.initFolderList = []
            that.folderList = []
            that.isFolderNull = true
          }
        })
      },

      chooseList: function (type, name) {
        console.log(name)
        // if (type) {
        //   this.listChange = false
        // }
        // if (this.$route.fullPath.indexOf('/cloudSpace/' + path) === -1) {
        //   let pushUrl = '/cloudSpace/' + path
        //   if (namePath) {
        //     pushUrl = pushUrl + namePath
        //   }
        //   // this.$router.push({
        //   //   path: pushUrl
        //   // })
        // }
      },
    }
  }
</script>

<style scoped>
    .add-folder{
        position: absolute;
        bottom: 80px;
        width: 100px;
        left: 0;
        right: 0;
        color: #2A2A2A;
        margin: auto;
        font-size: 14px;
    }

    .add-folder .add-icon{
        color: #aaacb5;
        font-size: 20px;
    }

    .button-box{
        position: absolute;
        bottom: 20px;
        right: 0;
    }

    .button-box button{
        height: 30px;
        width: 90px;
        border-radius: 2px;
        font-size: 12px;
        margin-right:40px;
    }

    .button-box .ok{
        background: #4690F5;
        border: 1px solid #4690F5;
        color: #ffffff;
    }

    .button-box .cencel{
        background: #ffffff;
        border: 1px solid #D8D9E5;
    }

    .main {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100vw;
        background: rgba(0, 0, 0, 0.51);
    }

    .model {
        width: 678px;
        margin: calc(50vh - 250px) auto 0;
    }

    .model .header {
        font-size: 14px;
        color: #333333;
        letter-spacing: 1px;
        background: #F2F4F9;
        border-radius: 2px;
        height: 46px;
        line-height: 46px;
    }

    .model .body {

    }

    .model .body .search-nav {
        background: white;
        height: 43px;
        border-bottom: 1px solid #E3E4ED;
    }

    .model .body .search-nav .back-box{
        padding-left: 10px;
    }

    .model .body .search-nav .back-box img{
        height: 15px;
        width: 15px;
        margin: 12px ;
    }

    .model .body .search-nav .back-box .back{
        transform: rotate(180deg);
    }

    .model .body .search-nav .search {
        height: 30px;
        width: 230px;
        background: #ECEFF6;
        border-radius: 15px;
        margin: 6px 20px;
        position: relative;
    }

    .model .body .search-nav .search .search-icon {
        height: 15px;
        width: 15px;
        margin: 8px 10px;
        position: absolute;
    }

    .model .body .search-nav .search input {
        width: 220px;
        height: 29px;
        border-radius: 15px;
        background: #ECEFF6;
        border: none;
        padding-left: 30px;
        padding-right: 20px;
        box-sizing: border-box;
    }

    .file-box {
        height: 400px;
        background: white;
        position: relative;
    }

    .file-box .dept-box {
        height: 100%;
        width: 288px;
        border-right: 1px solid #E3E4ED;

    }

    .file-box .dept-box .dept-list{
        width: 288px;

    }

    .file-box .dept-box .dept-list li{
        line-height: 40px;
        width: 288px;
        padding-left: 20px;

    }

    .folder-box{
        position: relative;
        width: calc(100% - 290px);
        height: 100%;
    }

    .folder-nav{
        height: 40px;
        width: 100%;
        box-sizing: border-box;
        padding-top: 10px;
    }

    .folder-nav .text{
        font-size: 14px;
        line-height: 18px;
    }

    .folder-nav .nav li{
        color: #91919F;;
    }

    .folder-nav .nav .active{
        color: #151515;
    }

    .folder-box .folder-list{
        padding-left: 20px;


    }

    .folder-box .folder-list li{
        height: 35px;
        font-size: 14px;
        line-height: 35px;
    }

    .folder-box .folder-list li .icon-box{
        transform: scale(1.2);
        margin-right: 10px;
    }

    .folder-box .folder-list li .text{
        line-height: 30px;
    }


    .dept-list-box {
        max-height: calc(100vh - 400px);
        overflow: auto;
    }

    .dept-name {
        position: relative;
        padding-left: 20px;
    }

    .icon {
        background-image: url("/icon/menu_icon2.png");
        background-repeat: no-repeat;
        background-size: 18px;
        height: 20px;
        width: 18px;
        margin: 0 10px;
    }


</style>
